<!--
  Generated template for the DetailsPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header no-border>

  <ion-navbar transparent>
    <ion-title>{{item.name}}</ion-title>
    <!-- <ion-buttons end>
        <button ion-button icon-only>
          <ion-icon name="search"></ion-icon>
        </button>
    </ion-buttons> -->
  </ion-navbar>

</ion-header>


<ion-content>
  <!-- 照片显示区域 -->
  <img src="assets/imgs/test.png" alt="">
  <!-- 标题 可能很长 但最长不超过30 -->
  <div padding>
    <h3>{{item.name}}</h3>
    <!-- 发布时间 -->
    <p text-right class="color-ignore">{{item.createTime}}</p>

    <!-- 三栏布局 -->
    <ion-grid>
      <ion-row text-center>
        <ion-col>
          <!-- 月租 -->
          <h4 class="color-danger">{{item.price}}元/月</h4>
        </ion-col>
        <ion-col>
          <!-- 房屋人员 -->
          <h4 class="color-danger">{{item.lived}}/{{item.total}}人</h4>
        </ion-col>
        <ion-col>
          <!-- 房屋总面积 -->
          <h4 class="color-danger">
            {{item.acreage}}㎡
          </h4>
        </ion-col>
      </ion-row>
    </ion-grid>
    <!--分割 -->
    <hr>
    <!-- 资料网格区域 -->
    <ion-grid no-padding>
      <ion-row>
        <ion-col>
          <p class="color-ignore">装修:</p>
        </ion-col>
        <ion-col>
          <!-- 装修风格 -->
          <p>精装修</p>
        </ion-col>
        <ion-col>
          <p class="color-ignore">合租:</p>
        </ion-col>
        <ion-col>
          <!-- 合租要求 -->
          <p>男女不限</p>
        </ion-col>
      </ion-row>

      <ion-row>
          <ion-col>
            <p class="color-ignore">朝向:</p>
          </ion-col>
          <ion-col>
            <!-- 朝向 -->
            <p>阳面</p>
          </ion-col>
          <ion-col>
            
          </ion-col>
          <ion-col>
            <!-- 其他信息 -->
            <p></p>
          </ion-col>
        </ion-row>

        
      <!-- 地址单独占据一行 -->
      <ion-row>
        <ion-col col-3>
          <p class="color-ignore">地址:</p>
        </ion-col>
        <ion-col col-9>
          <p>{{item.address}}</p>
        </ion-col>
      </ion-row>
    </ion-grid>
    <!-- 房屋配置 for循环badges-->
    <h3>房屋配置</h3>
    <hr no-padding>
    <ion-grid class="device">
      <ion-row>
        <ion-col col-2 text-center *ngFor="let bd of item.badges">
          <ion-icon name="{{bd.icon}}"></ion-icon>
          <p no-margin>{{bd.label}}</p>
        </ion-col>

      </ion-row>
    </ion-grid>



  </div>

  <!-- 找室友 -->
  <div>
    <h3 padding-left>正在合租</h3>
    <hr no-padding>
    <ion-list>
      <ion-item>
        <ion-avatar item-start>
          <img src="asserts/icon/favicon.ico">
        </ion-avatar>
        <h2>张飞</h2>
        <h3>1789638605554</h3>
        <p>希望遇到一个爱干净的室友</p>
      </ion-item>
      <ion-item>
        <ion-avatar item-start>
          <img src="asserts/icon/favicon.ico">
        </ion-avatar>
        <h2>刘备</h2>
        <h3>1789638605554</h3>
        <p>希望遇到一个爱干净的室友</p>
      </ion-item>
      <ion-item>
        <ion-avatar item-start>
          <img src="asserts/icon/favicon.ico">
        </ion-avatar>
        <h2>关羽</h2>
        <h3>17896382344554</h3>
        <p>希望遇到一个爱干净的室友</p>
      </ion-item>
    </ion-list>
  </div>


  <!-- 关于本套房子的评论-->
  <div>
    <h3 padding-left>历史住户</h3>
    <hr no-padding>
    <!-- 循环本房子的评论 如果没有给出友好提示 -->
    <ion-card>
      <ion-card-header>
        张三
      </ion-card-header>
      <ion-card-content>
        这所房子装修还不错，适合刚毕业的大学生。
      </ion-card-content>
    </ion-card>
    <ion-card>
      <ion-card-header>
        李四
      </ion-card-header>
      <ion-card-content>
        那咱们住这里把三哥
      </ion-card-content>
    </ion-card>
    <ion-card>
      <ion-card-header>
        王五
      </ion-card-header>
      <ion-card-content>
        不行呀四哥  这离我工作地点太远呀
      </ion-card-content>
    </ion-card>
    <ion-card>
      <ion-card-header>
        张三
      </ion-card-header>
      <ion-card-content>
        恩是不行
      </ion-card-content>
    </ion-card>






  </div>

  


</ion-content>

<!-- 底部固定菜单 -->
<ion-footer no-padding no-margin>
  <ion-row no-padding no-margin> 
    <ion-col col-4 no-padding no-margin>
        <button ion-button full no-padding no-margin color="danger">查看联系人</button>
    </ion-col>
    <ion-col col-4 no-padding no-margin><button ion-button full no-padding no-margin >申请看房</button></ion-col>
    <ion-col col-4 no-padding no-margin><button ion-button color="danger" full no-padding no-margin (click)="joint()">我要合租</button></ion-col>
  </ion-row>
  
</ion-footer>